<script setup>
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount  } from 'vue';

onMounted(() => {
    // 图
    var chartDom = document.getElementById('graph');
    var myChart = echarts.init(chartDom);
    var option;

    // 图相关配置
    option = {
        // title: {
        //     text: '评测任务进度',
        //     left: '20px'
        // },
        color: ['#f89f62', '#f49ff1', '#99def8'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            right: '26px',          // 关键！为右侧图例留出 80px 空间
            left: '26px',           // 左侧留适当空间给 y 轴标签
            top: '20px',
            bottom: '10px',
            containLabel: true      // 推荐：确保所有标签都被包含在内，自动调整
        },
        // legend: {
        //     orient: 'vertical',     // 垂直排列（推荐用于右侧）
        //     itemGap: 10,
        //     right: 15,              // 距离容器右边 10px
        //     top: 'middle',          // 垂直居中，也可用 'top' 或具体像素如 20
        // },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            splitLine: {
                show: true  // 🔥 关闭竖直方向的网格线
            }
        },
        yAxis: {
            type: 'category',
            data: ['A学院', 'B学院', 'C学院', 'D学院', '部门'],
        },
        barCategoryGap: '50%',
        series: [
            {
                name: '预警人数',
                type: 'bar',
                data: [43, 54, 21, 14, 15],
                barWidth: '30%',
                label: {
                    show: true,           // 显示标签（即数值）
                    position: 'right', // 可选：'top', 'insideTop', 'right' 等
                    color: 'rgba(0, 0, 0, 0.6)',         // 字体颜色
                    fontSize: 12
                },
            },
            {
                name: '总人数',
                type: 'bar',
                data: [654, 630, 524, 320, 340],
                barWidth: '30%',

                label: {
                    show: true,           // 显示标签（即数值）
                    position: 'right', // 可选：'top', 'insideTop', 'right' 等
                    color: 'rgba(0, 0, 0, 0.8)',         // 字体颜色
                    fontSize: 12
                },
            },
            {
                name: '参与人数',
                type: 'bar',
                data: [545, 602, 434, 279, 324],
                barWidth: '30%',

                label: {
                    show: true,           // 显示标签（即数值）
                    position: 'insideRight', // 可选：'top', 'insideTop', 'right' 等
                    color: 'rgba(0, 0, 0, 1)',         // 字体颜色
                    fontSize: 12
                },
            }
        ],
        barGap: '5%'
    };

    // 设置图形配置
    option && myChart.setOption(option);

    // 监听窗口 resize 事件
    const handleResize = () => {
        myChart?.resize();
    };

    // 添加窗口变化的监听事件
    window.addEventListener('resize', handleResize);

    // 组件卸载前移除监听，防止内存泄漏
    onBeforeUnmount(() => {
        window.removeEventListener('resize', handleResize);
        // 销毁图表实例
        myChart?.dispose();
    });
})
</script>

<template>
<div class="box">
    <div class="title"><img src="@/assets/images/home/首页各个功能标题前图标.png" alt="" width="22px" height="22px" style="margin-right: 10px">测评任务进度</div>
    <div class="graph-box">
        <div class="graph-box-top" id="graph"></div>
        <div class="graph-box-bottom">
             <table>
                <thead>
                    <tr>
                        <th class="col1" style="border: none;"></th>
                        <th>A学院</th>
                        <th>B学院</th>
                        <th>C学院</th>
                        <th>D学院</th>
                        <th>部门</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <th class="col1"><div class="legend" style="background-color: #f89f62;"></div> 预警人数</th>
                        <td>43</td>
                        <td>54</td>
                        <td>21</td>
                        <td>14</td>
                        <td>18</td>
                    </tr>
                    <tr>
                        <th class="col1"><div class="legend" style="background-color: #f49ff1;"></div>总人数</th>
                        <td>654</td>
                        <td>630</td>
                        <td>524</td>
                        <td>320</td>
                        <td>340</td>
                    </tr>
                    <tr>
                        <th class="col1"><div class="legend" style="background-color: #99def8;"></div>参与人数</th>
                        <td>545</td>
                        <td>602</td>
                        <td>434</td>
                        <td>279</td>
                        <td>324</td>
                    </tr>
                </tbody>
             </table>
        </div>
    </div>
</div>
</template>

<style scoped>
.box {
    width: 1200px;
    height: 530px;
    margin: 0 auto;
    margin-top: 54px;
    /* background-color: pink; */
}
.title {
  display: flex;
  align-items: center;
  font-size: 16px;
  padding-left: 30px;
  padding-bottom: 30px;
}
.graph-box {
    height: 476px;
    background-color: white;

}
.graph-box-top {
    height: 72%;
    /* background-color: red; */
}
.graph-box-bottom {
    /* padding: 10px 10px; */
    padding: 0px 20px;
    height: 28%;
    /* background-color: blue; */
}
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    color: rgba(0, 0, 0, .5);
}
th, td {
    border: 1px solid rgba(0, 0, 0, .3);
    /* padding: 10px; */
    text-align: center;
}
.col1 {
    width: 9%;
    padding-left: 10px;
    text-align: left;
}
.legend {
    display: inline-block;
    width: 16px;
    height: 12px;
    border-radius: 4px;
    /* background-color: red; */
}
</style>
